Practical use of CSS Grid min-content

There are several use-cases for CSS Grid. In this example, it is used to solve the following requirements:

Create a table component with a fixed height
A header should always be at the top of the component
A footer should always be at the bottom of the component
The component should always have the same height, no matter how many rows are displayed
Overflow should be scollable

This can be accomplished with auto and min-content:

<div class="grid">
  <div class="header-filter">
    ...
  </div>
  <div class="table">
    ...
  </div>
  <div class="footer-pagination">
    ...
  </div>
</div>

.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 250px;
}

.table {
  overflow: auto;
}

Check out this CodePen for a working example.

Disable preview mode in VS Code

What is the difference between the left and the right file? The right one is opened in preview mode.

Opening another file won't result in a new tab. Instead, the preview tab is changed to the new file - meaning the file currently previewed is closed.

The preview mode is used e.g. when you click on a file in the explorer or open a file through the Quick Open feature (Ctrl + p).

The following settings will disable the preview mode:

"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false

For more information on the preview mode, check out the official documentation.

Different color in Firefox and Chromium

Today I opened a website in Firefox and Chromium simultaneously. I noticed that the same color looks different in the two browsers.

I used the following inline website to check it out:

data:text/html,
<style>
  body {
    margin: 0;
    padding: 0;
  }

  div {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: blue;
    color: white;
    font-size: 20vw;
  }
</style>
<body><div>0000ff</div></body>

Turns out that this is due to the color profile selected by the browser.

You can change the color profile of Chrome / Chromium at chrome://flags/#force-color-profile.

Check here for more information.

Using pandoc with Docker

Nobody likes installing the whole Latex toolchain to convert your documents with pandoc.

Docker to the rescue!

docker run -v $(pwd):/source jagregory/pandoc -t beamer presentation.md presentation.pdf

Check out this repository for more information!

Infinite rows with CSS Grid

CSS Grids can be used to layout your website in columns and rows. But did you know you don't have to specify the amount of rows?

You can define the height for each row with grid-auto-rows.

#grid {
  background-color: #1a2b3c;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 50px;
}

#item1 {
  background-color: #6699ff;
  grid-column: 1 / 4; /* width: 3fr */
  grid-row: 1 / 5; /* height: 200px */
}

#item2 {
  background-color: #66ffff;
  grid-column: 2 / 7; /* width: 5fr */
  grid-row: 2 / 11; /* height: 450px */
}

Check it out on codepen.

You can also use grid-auto-columns for infinite columns.

Install Docker on Fedora 29+

Docker can be installed through Fedora's standard repos, but it was renamed to moby-engine.

It can be installed with dnf install moby-engine.

See this issue for more information.

Set CSS Grid item width

In CSS Grid, you specify the size and position of elements with grid-column and grid-row. Normally you specify the position with {start-position} / {end-position}.

But you can also specify the width with span:

#item {
  /* 3 columns wide, 2 rows high */
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
}

Check out this codepen example.

Find DHCP server with nmap

TL;DR

Unknown DHCP Server in your network? sudo nmap --script broadcast-dhcp-discover

Story time

You enter the office like every morning, go upstairs and suddenly 3 Sales-colleges shout at you - the Internet is down.

You sit down next to one of their PCs and start debugging.
You see the PC got an IP address - 192.168.88.54.
Wait a second - our router is configured for the network 192.168.0.0/24!
What's going on here?
You start your own PC - same thing.

First of all, you set static IP addresses for the correct network on all PCs - they can reach the outside world again, and your co-workers can continue working.

Next step: You need to find out where the .88.*-IPs come from.

Thankfully, there is a nice nmap script for that:

$ sudo nmap --script broadcast-dhcp-discover

Pre-scan script results:
| broadcast-dhcp-discover:
|   Response 1 of 1:
|     IP Offered: 192.168.88.133
|     DHCP Message Type: DHCPOFFER
|     Server Identifier: 192.168.0.208
|     IP Address Lease Time: 10m00s
|     Subnet Mask: 255.255.255.0
|     Router: 192.168.88.1

Service Info: Host: the_office; OSs: Linux, RouterOS; Device: router; CPE: cpe:/o:mikrotik:routeros, cpe:/o:linux:linux_kernel

"We don't have any MikroTik products in our office", you think.

You do an image search for MikroTik routers on your phone and wander around in the office to find a similar-looking small box.

Half an hour later, you find it under someones desk, burried between ethernet cables. You remove it from the network and voila, everyone gets IP addresses from the correct DHCP server again.

Later you find out, that one of your co-workers wanted to add a switch to the network to expand the available ethernet ports. In a misunderstanding, they added a router instead.

Thanks to you (and this handy script), the internet is saved and you can finally start your working day.

Specify docker exec user

With docker exec, you can execute commands inside of running Docker containers. The --user flag allows you to declare the user to use inside the container.

Example:

$ docker run -d
cf4bea1aa03eafc0a4adf49cc1f38e98de66ab586cbf026d369de2d51f83fbc3
$ docker exec -it --user postgres cf4bea1a /bin/bash
postgres@cf4bea1aa03e:/$

Disable pager for psql

PostgreSQL's CLI psql offers a myriad of helpful features.

For example, psql detects whenever a large result-set is returned and uses a pager to display the content.

While this is great for viewing your data, it is really inconvenient for automating tasks, as the pager needs user input to be terminated.
So, how can we circumvent / deactivate the pager?

# original, shows the pager
psql -h localhost -U postgres -c "SELECT * FROM pg_class"

# just pipe the output to `cat`
psql -h localhost -U postgres -c "SELECT * FROM pg_class" | cat

# if you are not interested in the output, you can also write to /dev/null
psql -h localhost -U postgres -c "SELECT * FROM pg_class" > /dev/null

# alternatively, you can use the environment variable `PAGER` to choose which pager should be used
PAGER=cat psql -h localhost -U postgres -c "SELECT * FROM pg_class"

# best method: completely turn off the pager
psql -h localhost -U postgres -P pager=off -c "SELECT * FROM pg_class"

Additionally, if you want to disable the pager while in interactive mode, just type \pset pager off.

Today I learned@

Lorenz Henk